<template>
	<view class="container">
		<view class="menu">
			<view :class="{'active': currentMenu === 'myCourses'}" @click="currentMenu = 'myCourses'">我的课程</view>
			<view :class="{'active': currentMenu === 'postCourse'}" @click="currentMenu = 'postCourse'">发布课程</view>
		</view>

		<!-- 我的课程列表 -->
		<view v-if="currentMenu === 'myCourses'" class="course-list">
			<view v-for="(course, index) in courses" :key="index" class="course-item">
				<view class="item-details">
					<text>课程名称: {{ course.course }}</text>
					<text>授课方式: {{ course.teach_method }}</text>
					<text>授课时间: {{ course.time }}</text>
					<text>教授情况: {{ course.teach_situation }}</text>
					<text>薪资: {{ course.salary }}</text>
				</view>
				<button @click="deleteCourse(course.id)" class="delete-button">删除</button>
			</view>
		</view>

		<!-- 发布课程表单 -->
		<view v-if="currentMenu === 'postCourse'" class="form-container">
			<uni-forms ref="formRef" :modelValue="form" :rules="rules" label-width="140rpx" label-align="left">
				<!-- 课程名称 -->
				<uni-forms-item label="课程名称" name="course">
					<uni-easyinput v-model="form.course" placeholder="请输入课程名称"></uni-easyinput>
				</uni-forms-item>

				<!-- 授课方式 -->
				<uni-forms-item label="授课方式" name="teach_method">
					<uni-easyinput v-model="form.teach_method" placeholder="线上/线下"></uni-easyinput>
				</uni-forms-item>

				<!-- 授课时间 -->
				<uni-forms-item label="授课时间" name="time">
					<uni-easyinput v-model="form.time" placeholder="请输入授课时间"></uni-easyinput>
				</uni-forms-item>

				<!-- 教授情况 -->
				<uni-forms-item label="教授情况" name="teach_situation">
					<textarea v-model="form.teach_situation" placeholder="请输入教授情况" style="height: 120rpx; border: solid #f0f0f0;"></textarea>
				</uni-forms-item>

				<!-- 薪资 -->
				<uni-forms-item label="薪资" name="salary">
					<uni-easyinput v-model="form.salary" placeholder="请输入期望薪资" type="number"></uni-easyinput>
				</uni-forms-item>

				<view class="form-item">
					<button type="primary" @click="submitForm">发布</button>
				</view>
			</uni-forms>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				currentMenu: 'myCourses', // 控制当前显示的菜单项
				courses: [], // 教师发布的课程列表
				user: uni.getStorageSync('xm-user'), // 获取当前登录教师账号信息
				form: {
					account: '',
					course: '',
					teach_method: '',
					time: '',
					teach_situation: '',
					salary: ''
				},
				rules: {
					course: {
						rules: [{ required: true, errorMessage: "课程名称不能为空" }]
					},
					teach_method: {
						rules: [{ required: true, errorMessage: "授课方式不能为空" }]
					},
					time: {
						rules: [{ required: true, errorMessage: "授课时间不能为空" }]
					},
					salary: {
						rules: [{ required: true, errorMessage: "薪资不能为空" }]
					}
				}
			};
		},
		methods: {
			// 提交表单，发布课程信息
			submitForm() {
				this.$refs.formRef.validate((valid) => {
						this.form.account = this.user.account;
						this.$request.post('/teach/insert', this.form).then(res => {
							if (res.code === '200') {
								uni.showToast({
									icon: "success",
									title: "发布成功"
								});
								this.resetForm();
								this.fetchCourses();
							} else {
								uni.showToast({
									icon: "error",
									title: res.msg
								});
							}
						});
					
				});
			},
			// 重置表单
			resetForm() {
				this.form = {
					course: '',
					teach_method: '',
					time: '',
					teach_situation: '',
					salary: ''
				};
			},
			// 获取教师发布的课程列表
			fetchCourses() {
				this.$request.get(`/teach/selectByAccount?account=${this.user.account}`).then(res => {
					if (res.code === '200') {
						this.courses = res.data;
					}
				});
			},
			// 删除课程信息
			deleteCourse(id) {
				uni.showModal({
					title: "确认删除",
					content: "确定要删除该课程吗？",
					success: (res) => {
						if (res.confirm) {
							this.$request.del(`/teach/delete/${id}`).then(response => {
								if (response.code === '200') {
									uni.showToast({
										icon: "success",
										title: "删除成功"
									});
									this.fetchCourses();
								}
							});
						}
					}
				});
			}
		},
		mounted() {
			this.fetchCourses(); // 页面加载时获取课程列表
		}
	}
</script>

<style>
.container {
	padding: 20rpx;
}

.menu {
	display: flex;
	justify-content: space-around;
	border-bottom: 1px solid #ccc;
	margin-bottom: 20rpx;
}

.menu view {
	flex: 1;
	text-align: center;
	padding: 20rpx 0;
	cursor: pointer;
}

.menu view.active {
	color: #007aff;
	border-bottom: 2px solid #007aff;
}

.course-list {
	padding: 20rpx;
}

.course-item {
	border: 1px solid #ccc;
	padding: 10rpx;
	margin: 10rpx 0;
}

.item-details text {
	display: block;
	margin: 5rpx 0;
}

.delete-button {
	background-color: #ff4d4f;
	color: white;
	padding: 10rpx;
	border-radius: 5rpx;
	margin-top: 10rpx;
}

.form-container {
	padding: 20rpx;
}

.form-item {
	margin-bottom: 20rpx;
}

.form-item text {
	margin-bottom: 5rpx;
	display: block;
}

.form-item input,
.form-item textarea {
	width: 100%;
	border: 1px solid #ccc;
	padding: 10rpx;
	border-radius: 5rpx;
}
</style>
